<!-- 添加主容器中的栅格系统 -->
<template>
  <div class="add-container-col" v-if="dialogShow">
    <el-dialog title="添加栅格" :visible.sync="dialogShow">
      <div class="add-container-u">
        <el-form :model="containerCol">
          <el-form-item label="插入位置" :label-width="formLabelWidth" style="margin-bottom: 0px;">
            <el-radio-group v-model="containerCol.position">
              <el-radio size="mini" :label="-1">容器组件内顶部</el-radio>
              <el-radio size="mini" :label="-2">容器组件内底部</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择栅格类型" :label-width="formLabelWidth" style="margin-bottom: 0px;">
            <el-radio-group v-model="containerCol.girdtype" class="radio-disblock">
              <el-radio size="mini" label="col-sm">768px及以下（手机竖屏）换行</el-radio>
              <el-radio size="mini" label="col-md">992px及以下（手机横屏）换行</el-radio>
              <el-radio size="mini" label="col-lg">1200px及以下（ipad）换行</el-radio>
              <el-radio size="mini" label="col-xs">不换行</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="行数" :label-width="formLabelWidth" style="margin-bottom: 0px;">
            <el-input size="mini" type="number" style="width:80px;" v-model="containerCol.row" min="1" :max="maxrow"
              placeholder="" @blur="containerCol.row = onlyNumber(containerCol.row)"></el-input>
          </el-form-item>
          <el-form-item label="列数" :label-width="formLabelWidth" style="margin-bottom: 0px;">
            <el-input size="mini" type="number" style="width:80px;" v-model="containerCol.col" min="1" :max="maxcol"
              placeholder="" @blur="containerCol.col = onlyNumber(containerCol.col)"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取 消</el-button>
        <el-button size="small" type="primary" @click="saveclose">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as PubsubType from '@/config/pubsubtype.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import PubSub from 'pubsub-js'
import { mapState } from 'vuex'
export default {
  props: {
    tmpContainerId: {
      type: String
    },
    updateBjContainerCols: {
      type: Function
    },
    maxrow: {
      type: Number,
      default: 48
    },
    maxcol: {
      type: Number,
      default: 24
    }
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
  },
  mounted () {
    PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
      this.close()
    })
  },
  data () {
    return {
      dialogShow: false,
      loading: false,
      containerData: null,
      formLabelWidth: '120px',
      // 默认数据
      containerCol: {
        position: -2,
        girdtype: 'col-xs',
        row: 1,
        col: 1
      }
    }
  },
  methods: {
    show () {
      this.dialogShow = true
      this.loading = false
    },
    close () {
      this.dialogShow = false
      this.containerData = null
      this.containerCol = {
        position: -2,
        girdtype: 'col-xs',
        row: 1,
        col: 1
      }
    },
    onlyNumber (value) {
      let valuefilter = value.toString().replace(/^\.+|[^\d.]/g, '')
      return valuefilter || 1
    },
    saveclose () {
      let fellbackdata = BackendjsFunctions.addContainerCol(this.tmpContainerId, this.containerCol.row, this.containerCol.col, this.containerCol.position, this.containerCol.girdtype)
      this.updateBjContainerCols(fellbackdata)
      this.close()
    }
  },
  components: {
  }
}
</script>

<style scoped lang="scss">
.add-container-u {
  min-width: 520px;
}
.radio-disblock {
  padding-top: 5px;
  padding-bottom: 10px;

  /deep/ .el-radio {
    line-height: 30px;
    min-width: 40%;
  }
}
</style>
